<template>
  <div class="other_box">
    <div class="pic">
      <div class="swiper_box">
        <van-swipe :autoplay="2000" lazy-render>
          <van-swipe-item v-for="(item, index) in currentList?.bannerList" :key="index">
            <img :src="item.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="goodList" v-for="(item, index) in category" :key="index">
      <div class="goodTitle">
        <span class="name">{{ item.category.name }}</span>
        <span class="fontname">{{ item.category.frontName }}</span>
      </div>
      <div class="goodItem" v-for="(item1, index) in item.itemList" :key="index">
        <img :src="item1.scenePicUrl" alt="" />
        <div class="goodDescription">
          <van-icon name="	https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" />{{
            item1.name
          }}
        </div>
        <div class="goodPrice">
          <span class="price1" v-if="item1.finalPriceInfoVO.priceInfo.finalPrice?.price"
            >￥{{ item1.finalPriceInfoVO.priceInfo.finalPrice?.price }}</span
          ><span v-else class="price1">￥{{ item1.finalPriceInfoVO.priceInfo?.basicPrice }}</span>
          <span class="price2" v-if="item1.finalPriceInfoVO.priceInfo?.counterPrice"
            >￥{{ item1.finalPriceInfoVO.priceInfo?.counterPrice }}</span
          >
        </div>
        <div class="activity" v-if="item1.finalPriceInfoVO.banner?.content">
          {{ item1.finalPriceInfoVO.banner?.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqHomeCateList } from '@/api/home'
import { categoryItemList, currentCategory } from '@/types/home'
import { onMounted, ref } from 'vue'

const category = ref<categoryItemList[]>([])

const currentList = ref<currentCategory>()

const getHomeCateList = async () => {
  const res = await reqHomeCateList(props.id)
  category.value = res.data.data.categoryItemList

  currentList.value = res.data.data.currentCategory
}

const props = defineProps({
  id: {
    type: Number || String,
    default: 1005000
  }
})

onMounted(() => {
  getHomeCateList()
})
</script>

<style scoped lang="less">
.pic {
  img {
    width: 375px;
    height: 180px;
  }
}
.goodList {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 5px solid rgb(221, 215, 215);
}

.goodTitle {
  width: 370px;
  height: 30px;
  margin-bottom: 20px;
  margin-top: 10px;
  .name {
    font-size: 24px;
    text-align: center;
    display: block;
  }
  .fontname {
    font-size: 14px;
    display: block;
    text-align: center;
  }
}

.goodItem {
  box-sizing: border-box;
  width: 185px;
  height: 302px;
  padding: 8px;
  background-color: #fff;
  // border: 1px solid #eee;
  img {
    width: 172.5px;
    height: 172.5px;
    border-radius: 0.16rem;
  }

  .goodDescription {
    width: 172.5px;
    height: 40px;
    font-size: 14px;
  }
  .goodPrice {
    width: 172.5px;
    height: 30px;
    font-size: 0.2rem;
    .price1 {
      font-size: 20px;
      color: rgb(250, 30, 50);
    }
    .price2 {
      display: inline-block;
      color: rgb(153, 153, 153);
      text-decoration: line-through;
      font-size: 16px;
    }
  }
}

.activity {
  width: 172.5px;
  height: 25px;
  // margin: 5px 0 0;
  background-color: #ffe9eb;
  border-radius: 25px;
  color: #fa1e32;
  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
}
</style>
